<template>

        <a-select  v-if="isSelect" style="width: 150px;" ref="selectRef" @search="searchHandler" v-model:value="selectedValue" mode="single" showSearch @blur="selectBlurHandler" @inputKeyDown.enter="enterHandler" :open="selectOpenMenu">
            <a-select-option v-for="option in options" :key="option.value" :value="option.value">
                {{ option.label }}
            </a-select-option>
        </a-select>
        <a-input  v-if="!isSelect" style="width: 150px;" v-model:value="selectedValue" @focus="inputFocusHandler"></a-input>

</template>

<script setup lang='ts'>
import { nextTick, ref } from 'vue'
let selectedValue = ref()
// 输入框的内容
// let inputValue = ref()

// 下拉框是否展开
let selectOpenMenu = ref(false)

let selectRef = ref()
// 决定到底展示下拉框还是输入框的函数
let isSelect = ref(false)

const options = ref([
    { value: '选项1', label: '选项1' },
    { value: '选项2', label: '选项2' },
    { value: '选项3', label: '选项3' },
])
const searchHandler = (val)=>{
    // 保存搜索框内容
    selectedValue.value = val
    // console.log(searchValue.value);
}

const selectBlurHandler = ()=>{
    isSelect.value = false
}

const enterHandler = (e)=>{
    if (e.key=='Enter') {
        selectBlurHandler()
    }
    
}

//输入框聚焦触发的回调
const inputFocusHandler = ()=>{
    isSelect.value = true
    nextTick(()=>{
        selectRef.value.focus()
        selectOpenMenu.value = true
    })
    // console.log(selectRef.value);
    
}
</script>

<style scoped></style>